<template>
  <div class="register">
    <div class="bg">
        <img src="../../assets/header-bg-old.11371b7.png" alt="">
    </div>
    <div class="reg-wrapper">
        <div class="tit">登录有驾账号 精彩永相随</div>
        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="用户名"
                label=""
                placeholder="请输入账号"
                :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label=""
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 30px;">
                <van-button round block type="info" native-type="submit">登录</van-button>
            </div>
        </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data() {
    return {
         username: '',
          password: '',
          userlist:[],
    }
  },
  methods:{
     onSubmit(values) {
        var user =JSON.parse(localStorage.getItem('userinfo')) || []
        console.log(user);
        this.userlist.push(values)
        localStorage.setItem('userinfo',JSON.stringify(this.userlist))  
        this.username = ''
        this.password = ''
        this.$router.push('/home')
    },
  }
}
</script>

<style lang="scss" scoped>
.register {
        width: 100%;
        height: 100%;
        .bg {
                width: 100%;
                height: 250px;
                img {
                    width: 100%;
                    height: 100%;
                }
        }
        .reg-wrapper {
            width: 350px;
            height: 400px;
            box-shadow: 0 0 10px 0 #999696;
            border-radius: 20px;
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            .tit {
                color: #1f1f1f;
                font-weight: 600;
                font-size: 20px;
                text-align: center;
                margin-top: 20px;
            }
        }
    }
    .register ::v-deep {
        .van-form {
            margin-top: 40px;
        }
        .van-cell {
            padding: 25px 16px;
        }
    }
</style>
